<template>
    <div class="main_container flex back_color">
        <!--        左边菜单-->
        <div class="left_menu">
            <el-image
                    class="margin_10 top_logo"
                    src="logo.png"
            >

            </el-image>
            <el-menu
                    @select="handleSelect"
                    :default-active="menuName"
                    class="el-menu-vertical-demo"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <el-menu-item index="客户管理">
                    <i class="el-icon-user-solid"></i>
                    <span slot="title">客户管理</span>
                </el-menu-item>
                <el-menu-item index="教练管理">
                    <i class="el-icon-s-order"></i>
                    <span slot="title">教练管理</span>
                </el-menu-item>
                <el-menu-item index="课程管理">
                    <i class="el-icon-s-cooperation
"></i>
                    <span slot="title">课程管理</span>
                </el-menu-item>
            </el-menu>
        </div>
        <!--        顶部内容-->
        <div class="top_container flex" style="z-index: 100">
            <h2 class="auto white_color margin_left_10">健身房系统管理端</h2>
            <div class="flex_1">

            </div>
            <!--右侧菜单-->
            <div class="auto flex">
                <p class="auto white_color margin_right_10">超级管理员</p>
                <el-button type="danger" class="margin_right_20" @click="logout">退出登录</el-button>
            </div>
        </div>
        <!--        右边内容-->
        <div class="back_color padding_10"
             style="padding-bottom:20px;top: 60px;position: absolute;bottom: 0px;right: 0px;left: 240px;">
            <el-card :body-style="{ padding: '0px' }" class="padding_10 margin_bottom_10">
                <router-view></router-view>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                menuName: this.getSelectMenuName()
            }
        },
        watch: {
            $route: function () {
                this.checkLogin();
            }
        },
        created() {
            this.checkLogin();
        },
        computed: {
            user: function () {
                return this.$store.state.user;
            },
            config: function () {
                return this.$store.state.config;
            }
        },
        methods: {
            checkLogin: function () {
                if (!this.user) {
                    this.logout();
                }
                this.menuName = this.getSelectMenuName();
                var that = this;
                this.requestPost('/class_api/admin/check_login', null, function (res) {
                    var user = res.data;
                    that.saveUser(user);
                });
                this.getConfig();
            },
            logout: function () {
                this.saveUser(null);
                this.pushUrl('/login');
            },
            handleSelect: function (name) {
                // 跳转菜单
                this.jumpMenu(name);
            }

        }
    }
</script>

<style scoped>

    .top_logo {
        height: 50px;
    }

    .main_container {

    }

    .left_menu {
        position: fixed;
        top: 0px;
        left: 0px;
        bottom: 0px;
        width: 240px;
        background: #545c64;
    }

    .top_container {
        position: fixed;
        background: #545c64;
        height: 60px;
        left: 240px;
        right: 0px;
        top: 0px;

    }
</style>
